<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Tweetalyze</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
		
		<script>
			$(document).ready(function () 
			{
				$.ajax(
				{
					type: "GET",
					url: "result.xml",
					dataType: "xml",
					success: xmlParser
				});
			});

			function xmlParser(xml) 
			{
				$('#load').fadeOut();

				$(xml).find("tweet").each(function () 
				{
					$(".main").append('<div class="tweet"><div class="user">' + $(this).find("user").text() + '</div><div class="text">' + $(this).find("text").text() + '</div><div class="rating"><br/>Rating: ' + $(this).find("rating").text() + '</div><div class="date">Published ' + $(this).find("updated").text() + '</div></div>');
					$(".tweet").fadeIn(1000);
				});
			}
		</script>

		<style> 
			.main
			{
				width:1024px;
				margin:0 auto;
				height:130px;
			}
			 
			.tweet
			{
				width:220px;
				height:160px;
				float:left;
				margin:10px;
				border:1px #dedede solid;
				padding:5px;
				display:none;
			}

			.user
			{
				margin-bottom:6px;
			}
			 
			.text
			{
				font-size:10px; 
				font-family:Geneva, Arial, Helvetica, sans-serif;
			}

			.date
			{
				font-size:12px; 
				color:#666; 
				margin-top:4px;
			}
			
			.date
			{
				font-size:12px; 
				color:#222; 
				margin-top:4px;
				float: bottom;
			}

			.loader
			{
				height:11px;
			}
		</style>
	</head>
	
	<body>
		<div class="main">
			<div align="center" class="loader">
				<img src="loader.gif" id="load" width="16" height="11" align="absmiddle"/>
			</div>
		</div>

		<div class="clear"></div>
	</body>
</html>
